<template>
    <div class="yuan-container container">
        <a-card title="生产设备">
            <a-form-model ref="formModel" :label-col="formOption.labelCol" :wrapper-col="formOption.wrapperCol"
                          :layout="formOption.layout" :label-align="formOption.labelAlign" :hide-required-mark="formOption.hideRequiredMark"
                          :rules="formOption.rules" :model="formOption.formData">
                <a-row class="item" v-for="(item,i) in formOption.formData.list" :key="i">
                    <a-col :span="8">
                        <a-form-model-item label="生产设备名称" :prop="`${i}-name`">
                            <a-input v-model="item.name" placeholder="请输入设备名称" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="所属环节" prop="link">
                            <a-select v-model="item.link" placeholder="请输入设备名称">
                                <a-select-option :value="item.link">{{item.link}}</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="投料限制" prop="feedAstrict">
                            <a-radio-group v-model="item.feedAstrict">
                                <a-radio :value="1">开启</a-radio>
                                <a-radio :value="2">关闭</a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                    </a-col>
                    <div style="margin-top: 100px" v-if="item.feedAstrict == 1">
                        <a-col :span="6">
                            <a-row v-for="(jack,c) in item.feedNumJson" :key="c">
                                <a-col>
                                    <a-form-model-item label="投料数量">
                                        <a-input v-model="jack.value" placeholder="请输入投料数量" suffix="g"/>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="6">
                            <a-button style="margin-right: 10px" type="primary" @click="()=>{item.feedNumJson.push({value:''})}">添加</a-button>
                            <a-button v-if="item.feedNumJson.length>1" type="danger" @click="()=>{item.feedNumJson.pop()}">删除</a-button>
                        </a-col>
                    </div>
                </a-row>
            </a-form-model>
            <div  style="text-align: center;margin-top: 40px">
                <a-button type="primary" @click="submitForm">提交</a-button>
            </div>
        </a-card>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Watch} from "vue-property-decorator";
import { h } from "vue";
import { downLoadFile } from "@/utils";
import nextApi from "@/api/nextApi";
@Component({
    name: "productionMgt",
    components: {},
})

export default class extends Vue {
    //表单配置
    formOption: any = {
        labelCol: { style: { width: "100px" } },
        wrapperCol: { style: { width: "220px" } },
        layout: "inline",
        labelAlign: "right",
        hideRequiredMark: false,
        formData: {
            list:[
                // {
                //     name: "",
                //     plantName: "包装计划",
                //     feedAstrict: 2,
                //     putNum: [{value:''}]
                // },
                // {
                //     name: "",
                //     plantName: "制剂计划",
                //     feedAstrict: 2,
                //     putNum: [{value:''}]
                // },
                // {
                //     name: "",
                //     plantName: "提取计划",
                //     feedAstrict: 2,
                //     putNum: [{value:''}]
                // },
                // {
                //     name: "",
                //     plantName: "饮片计划",
                //     feedAstrict: 2,
                //     putNum: [{value:''}]
                // },
            ]
        },
        rules: {
            "0-productEquipmentName": [
                { validator:(rule: any, value: any, callback: any)=>{
                        if(this.formOption.formData.list[0].productEquipmentName){
                            callback()
                        }else{
                            callback("请输入设备名称")
                        }
                    }, message: "请输入设备名称", trigger: "blur" },
            ],
            "1-productEquipmentName": [
                { validator:(rule: any, value: any, callback: any)=>{
                        if(this.formOption.formData.list[1].productEquipmentName){
                            callback()
                        }else{
                            callback("请输入设备名称")
                        }
                    }, message: "请输入设备名称", trigger: "blur" },
            ],
            "2-productEquipmentName": [
                { validator:(rule: any, value: any, callback: any)=>{
                        if(this.formOption.formData.list[2].productEquipmentName){
                            callback()
                        }else{
                            callback("请输入设备名称")
                        }
                    }, message: "请输入设备名称", trigger: "blur" },
            ],
            "3-productEquipmentName": [
                { validator:(rule: any, value: any, callback: any)=>{
                        if(this.formOption.formData.list[3].productEquipmentName){
                            callback()
                        }else{
                            callback("请输入设备名称")
                        }
                    }, message: "请输入设备名称", trigger: "blur" },
            ],
        },
    };

    async getData() {
        const res = await nextApi.getEquipmentList()
        this.formOption.formData.list = res.data
        this.formOption.formData.list.forEach(item=>{
            item.feedNumJson = item.feedNumJson? item.feedNumJson:[]
        })
        this.formOption.formData.list = this.formOption.formData.list.map(item=>{
            return {
                ...item,
                feedNumJson:item.feedNumJson.map(jack=>{
                    return {
                        value:jack
                    }
                })
            }
        })
    }
    submitForm(){
       (this.$refs.formModel as any).validate(async (valid: boolean) => {
           if (valid) {
               try {
                   this.formOption.formData.list = this.formOption.formData.list.map(item=>{
                       return {
                           ...item,
                           feedNumJson:item.feedNumJson.map(jack=>{
                               return jack.value*1
                           })
                       }
                   })
                   const res = await nextApi.editEquipmentList(this.formOption.formData.list)
                   if(res.code == 200){
                       this.$message.success(res.msg)
                   }
               }finally {
                   await this.getData()
               }
           }
        })
    }
    mounted(){
        //查询
        this.getData()
    }
}
</script>
<style scoped lang="scss">
.container{
    .item{
        padding: 40px 0;
        border-bottom: 1px solid #eee;
    }
}
</style>
